<template>
    <div>
        <el-input v-model="title" placeholder="请输入评论内容"></el-input><el-button @click="button">发布</el-button>
        <div class="comments">
          <div v-for="comment in commentlist" :key="comment.id" class="comment">
            <div class="comment-header">
              <h4>用户{{ comment.userid }}的评论:<el-link :underline="false" @click="but(comment.id)">{{ comment.title }}</el-link></h4>
            </div>
            <div>
              <comment-item v-for="child in comment.son" :key="child.id" :comment="child" >
                <div class="comment-header">
                  <span>用户{{ child.userid }}的评论:<el-link :underline="false" @click="but(child.id)">{{ child.title }}</el-link></span>
                </div>
                <div>
                  <comment-item v-for="i in child.son" :key="i.id" :comment="i" >
                    <div class="comment-header">
                      <span>用户{{ i.userid }}的评论:<el-link :underline="false" @click="but(i.id)">{{ i.title }}</el-link></span>
                    </div>
                </comment-item>
                </div>
            </comment-item>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
export default {
    data() {
        return {
            commentlist: [],
            userid: localStorage.getItem("userid"),
            title: '',
            pid:0
        };
    },
    mounted() {
        this.getcomment()
    },
    methods: {
        getcomment() {
            this.axios.get("/comment").then(res => {
                if (res.data.code == 200) {
                    this.commentlist = res.data.data
                    console.log(this.commentlist)
                }
            })
        },
        but(id) {
            this.axios.post("/crecom", { "pid": id, "userid": this.userid, "title": this.title }).then(res => {
                if (res.data.code == 200) {
                    alert("评论成功")
                    this.getcomment()
                }
            })
        },
        button(){
            this.axios.post("/crecom", { "pid": this.pid, "userid": this.userid, "title": this.title }).then(res => {
                if (res.data.code == 200) {
                    alert("评论成功")
                    this.getcomment()
                }
            })
        }
    },
};
</script>

<style>

</style>
